<template lang="html">
  <section class="components-common_register_panel-date">
    <h1>{{title}}: </h1>
    <div class="placeholder">
      <i class="ic-category-more"></i>
      <datePicker
        :date="startTime"
        :option="option"
        :limit="limit"
        v-on:change="changeTime"
      ></datePicker>
    </div>
  </section>
</template>

<script>
import datePicker from '@/lib/vue-datepicker-es6'
import moment from 'moment'
import utils from '@/lib/utils'

export default {
  props: {
    name: {
      type: String,
    },
    title: {
      type: String,
    },
  },
  components: {
    datePicker,
  },
  data(){
    // function getDayString(days){
    //   let now, year, month, date
    //
    //   if(typeof days === 'number'){
    //       now = new Date(new Date().setDate(days))
    //       year = now.getFullYear()
    //       month = now.getMonth() + 1
    //       date = now.getDate()
    //   } else {
    //       now = new Date()
    //       year = now.getFullYear()
    //       month = now.getMonth() + 1
    //       date = now.getDate()
    //   }
    //   return `${year}-${month}-${date}`
    // }
    // let startPoint = getDayString(),
    //     endPoint = getDayString(360)
    return {
      isShowList: false,

      startTime: {
        time: ''
      },
      endtime: {
        time: ''
      },

      option: {
        type: 'min',
        week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        // week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        // month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        format: 'YYYY-MM-DD HH:mm',
        // format: 'YYYY-MM-DD',
        placeholder: '请选择开课时间',
        inputStyle: {
          'display': 'block',
          'width': '100%',
          'line-height': '0.66rem',
          'font-size': '0.373rem',
          'color': '#000',
          'background-color': 'transparent'
        },
        color: {
          header: '#ccc',
          headerText: '#f00'
        },
        buttons: {
          ok: '确认',
          cancel: '取消'
        },
        overlayOpacity: 0.5, // 0.5 as default
        dismissible: true // as true as default
      },
      timeoption: {
        type: 'min',
        week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        // month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        format: 'YYYY-MM-DD HH:mm'
      },
      multiOption: {
        type: 'multi-day',
        week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        // week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        // month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        format:"YYYY-MM-DD HH:mm"
      },
      limit: [
        // {
        //   type: 'weekday',
        //   available: [1, 2, 3, 4, 5]
        // },
        // {
        //   type: 'fromto',
        //   from: '2012-01-01',
        //   to: '2030-12-12'
        //   // from: startPoint,
        //   // to: endPoint
        // }
      ]
    }
  },
  methods: {
    changeTime(val){
      let timestamp = moment(val, 'YYYY-MM-DD HH:mm').valueOf()
      this.$emit('dispatchValue', {
        key: this.name,
        value: Math.floor(timestamp/1000)
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../../../css/config";
$paddingLeft: 15px;
.components-common_register_panel-date{
  position: relative;
  width: 100%;
  margin-bottom: 35px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  h1{
    font-size: 30px;
    color: #000;
    letter-spacing: 1Px;
  }
  .placeholder{
    position: relative;
    display: block;
    width: 70%;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    letter-spacing: 1Px;
    color: #000;
    padding-left: $paddingLeft;
    box-sizing: border-box;
    background-color: #e6e6e6;
    .ic-category-more{
      position: absolute;
      top: 0%;
      right: 15px;
      line-height: 50px;
      font-size: 12px;
      color: $common-red;
    }
  }
}
</style>
